<template>
  <div class="content-style" >
    <div
        style="margin-left: -240px;margin-top: 40px"
        class="chart_container"
        ref='echarts_con'>
    </div>
  </div>
</template>

<script>

import * as echarts from "echarts";

export default {
  data() {
    return {
      chartsType:1,
      chartsInfo: [],
    };
  },

  mounted() {
    this.queryItemInfo()
  },
  methods: {

    queryItemInfo() {
      var self = this;
      self.$axios.get('/echarts/select2').then((res) => {
        if (res.data.code == 200) {
          self.chartsInfo = res.data.data;
          self.$nextTick(function() {
            self.chartsType = 1;
            self.initEcharts1();
          });
        }
      });
    },

    initEcharts1() {
      let self = this;
      var echart = echarts.init(this.$refs.echarts_con);
      let xdata = [];
      let ydata = [];
      let chartsData = [];
      if(self.chartsInfo.length > 0){
        self.chartsInfo.forEach(element => {
          let info;
          xdata.push(element.name);
          ydata.push(element.count);
          info = {
            name: element.name,
            value: element.count
          }
          chartsData.push(info);
        });
      }else {
        xdata = ["暂无数据"];
        ydata = [""];
        chartsData = ["暂无数据"];
      }
      var option1 = {
        tooltip: {
          trigger: "item",
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          data: chartsData,
          itemWidth: 8,
          itemHeight: 8,
        },

        toolbox: {
          x: "80%",
          itemGap: 15,
          feature: {
            myTool1: {
              show: true,
              title: "饼状图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 1;
                echart.clear()
                self.initEcharts1();
              }
            },
            myTool2: {
              show: true,
              title: "柱状图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 2;
                echart.clear()
                self.initEcharts1();
              }
            },
            myTool3: {
              show: true,
              title: "折线图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 3;
                echart.clear()
                self.initEcharts1();
              }
            },

            saveAsImage: {
              icon:
                  "image://"
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: chartsData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }
        ]
      };

      var option2 = {
        tooltip: {
          trigger: "axis",
          formatter: function (arg){
            console.log(arg)
            return '日期:'+arg[0].axisValueLabel+'<br/>超高车辆:'+arg[0].data
          }
        },
        toolbox: {
          x: "80%",
          itemGap: 15,
          feature: {
            myTool1: {
              show: true,
              title: "饼状图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 1;
                echart.clear()
                self.initEcharts1();
              }
            },
            myTool2: {
              show: true,
              title: "柱状图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 2;
                echart.clear()
                self.initEcharts1();
              }
            },
            myTool3: {
              show: true,
              title: "折线图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 3;
                echart.clear()
                self.initEcharts1();
              }
            },

            saveAsImage: {
              icon:
                  "image://"
            },
          }
        },
        xAxis: {
          type: "category",
          data: xdata,
        },
        yAxis: {
          name: "超高车辆数量",
          axisLine: {
            show: true,
          },
          type: "value"
        },
        series: [
          {
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0]
              }
            },
            type: "bar",
            smooth: true, //true 为平滑曲线，false为直线,
            data: ydata
          }
        ]
      };

      //折线图
      var option3 = {

        tooltip: {
          trigger: "axis",
          formatter: function (arg){
            console.log(arg)
            return '日期:'+arg[0].axisValueLabel+'<br/>超高车辆:'+arg[0].data
          }
        },
        toolbox: {
          x: "80%",
          itemGap: 15,
          feature: {
            myTool1: {
              show: true,
              title: "饼状图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 1;
                echart.clear()
                self.initEcharts1();
              }
            },
            myTool2: {
              show: true,
              title: "柱状图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 2;
                echart.clear()
                self.initEcharts1();
              }
            },
            myTool3: {
              show: true,
              title: "折线图",
              icon:
                  "image://",
              onclick: function () {
                self.chartsType = 3;
                echart.clear()
                self.initEcharts1();
              }
            },

            saveAsImage: {
              icon:
                  "image://"
            }
          }
        },
        xAxis: {
          type: "category",
          data: xdata,
          //紧贴边缘
          boundaryGap: false,
        },
        yAxis: {
          name: "超高车辆数量",
          axisLine: {
            show: true,
          },
          type: "value"
        },
        series: [
          {
            barWidth: 35,
            animation: false,
            type: "line",
            areaStyle: {},
            symbol: "none",
            smooth: true, //true 为平滑曲线，false为直线,
            data: ydata
          }
        ]
      };
      if (self.chartsType == 1) {
        echart.setOption(option1, true);
      } else if (self.chartsType == 2) {
        echart.setOption(option2, true);
      } else if (self.chartsType == 3) {
        echart.setOption(option3, true);
      }
    }
  }
};
</script>

<style scoped>
.content-style {
  width: 1300px;
  height: 500px;
  position: absolute;
  left: 240px;
}
.chart_container {
  width: 100%;
  height: 90%;
}
</style>